<template>
	<view class="content">
		<view class="head">
			<uv-button @click="getUserBillList">刷新</uv-button>
		</view>
		<view class="bill-list" v-for="(item, index) in billList" :key="item.id">
			<view class="bill-left">
				<view class="bill-category">
					<view class="bill-category-avatar">
						<uv-avatar customStyle="margin:0 auto" :src="item.icon"
							shape="square"></uv-avatar>
					</view>
					<text class="bill-category-title">{{ item.title }}</text>
				</view>
				<view class="bill-info">
					<view class="bill-info-title">
						{{ item.title }}由{{ item.create_name }}垫付
					</view>
					<view class="bill-info-time">
						{{ item.create_datetime }}
					</view>
					<view class="bill-info-remark">
						备注:{{ item.remark }}
					</view>
				</view>

			</view>
			<view class="bill-right">
				<view class="bill-right-gr_money">
					￥{{ item.gr_money }}
				</view>
				<view class="bill-right-money">
					账单总额:{{ item.money }}
				</view>
			</view>
		</view>

	</view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useStore } from 'vuex';
import { apiConfig } from '../../apiConfig.js';
onMounted(() => {
	console.log("页面加载")
	getUserBillList();
});
const store = useStore().state;

const billList =ref([]);

const getUserBillList = async() =>{
	uni.request({
        url: `${apiConfig.baseUrl}`+'/bill/getUserBillList',
        method: 'POST',
        data: {
			"user_id":store.loginInfo.id
		},
        success: (res) => {
			if(res.data.code==200){
				billList.value = res.data.data
			}else{
				uni.showToast({
					title: res.data.msg,
					icon: 'none'
				});
				return;
			}
        },
        fail: (err) => {
          console.error('失败：', err);
        }
    });
}


</script>

<style lang="scss">
.bill-list {
	height: 70px;
	// background-color: rgb(138, 155, 209);
	display: flex;
	align-items: center;
	margin-top: 3px;
	border-bottom: 1px solid black;
	position: relative;
}

.bill-category {
	float: left;
	text-align: center;
	&-avatar{
		background-color: bisque;
		border-radius: 50%;
	}
	&-title{
		font-size: small;
	}
}

.bill-info {
	float: left;
	margin-left: 5px;

	&-time {
		color: gray;
		font-size: small;
	}
	&-remark{
		color: gray;
		font-size: small;
	}
}

.bill-right {
	position: absolute;
	top: 20%;
	right: 5px;
	// float: right;
	text-align: right;
	&-gr_money{
		font-size: larger;
	}
	&-money{
		
		color: gray;
		font-size: small;
	}
}
</style>
